<template>
  <div>
    <el-header>
      当前用户：<el-link>{{currentUser.username}}</el-link>
      <el-button @click="loginout">登出</el-button>
    </el-header>
    姓名：
    <el-input v-model="SerachAc.name" style="width: 110px"></el-input>
    账户号：
    <el-input v-model="SerachAc.number" style="width: 110px"></el-input>
    开户时间：
    <el-input v-model="SerachAc.beginTimeStart" type="date" style="width: 110px"></el-input>
    -
    <el-input v-model="SerachAc.beginTimeEnd" type="date" style="width: 110px"></el-input>
    余额范围：
    <el-input v-model="SerachAc.balanceStart" style="width: 110px"></el-input>
    -
    <el-input v-model="SerachAc.balanceEnd" style="width: 110px"></el-input>
    <el-button @click="select">查询</el-button>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="number"
          label="账户号">
        </el-table-column>
        <el-table-column
          prop="balance"
          label="账号余额">
        </el-table-column>
        <el-table-column
          prop="beginTime"
          label="开户时间">
        </el-table-column>
        <el-table-column width="400px"
                         label="操作">
          <template slot-scope="account">
            <el-button @click="seyn(account.row.id)">存钱</el-button>
            <el-button @click="take(account.row.id)">取钱</el-button>
            <el-button @click="turn(account.row.id)">转账</el-button>
            <el-button @click="stream(account.row.id)">银行流水</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="SerachAc.page"
        :page-size="SerachAc.pageSize"
        layout="total, prev, pager, next"
        :total="SerachAc.total">
      </el-pagination>
    </template>
  </div>
</template>

<script>
export default {
  name: 'AccountView',
  data () {
    return {
      // 列表
      tableData: [],
      // 查询条件
      SerachAc: {
        page: 1,
        pageSize: 3,
        key: '',
        total: null,
        name: '',
        number: null,
        balanceStart: null,
        balanceEnd: null,
        beginTimeStart: '',
        beginTimeEnd: '',
        moneyUser: null
      }
    }
  },
  // 计算字段
  computed: {
    currentUser () {
      return this.$store.state.userInfo
    }
  },
  methods: {
  // 登出
    loginout () {
      this.axios.post('/myLoginout').then(res => {
        this.$store.commit('setLoginUser', {})
        this.$router.push('/login')
      })
    },
    // 存钱
    seyn (id) {
      this.$router.push({
        name: 'seyn',
        query: {
          id: id
        }
      })
    },
    // 取钱
    take (id) {
      this.$router.push({
        name: 'take',
        query: {
          id: id
        }
      })
    },
    // 转账
    turn (id) {
      this.$router.push({
        name: 'turn',
        query: {
          id: id
        }
      })
    },
    // 流水
    stream (id) {
      this.$router.push({
        name: 'stream',
        query: {
          id: id
        }
      })
    },
    handleSizeChange (val) {
      this.SerachAc.pageSize = val
      this.list()
    },
    handleCurrentChange (val) {
      this.SerachAc.page = val
      this.list()
    },
    // 列表
    list () {
      this.axios.post('/account/listAccount', this.SerachAc).then(res => {
        this.tableData = res.data.records
        this.SerachAc.page = res.data.current
        this.SerachAc.pageSize = res.data.size
        this.SerachAc.total = res.data.total
      })
    },
    // 查询
    select () {
      this.axios.post('/account/listAccount', this.SerachAc).then(res => {
        this.tableData = res.data.records
        this.SerachAc.page = res.data.current
        this.SerachAc.pageSize = res.data.size
        this.SerachAc.total = res.data.total
      })
    }
  },
  // 页面加载时 获取数据
  created () {
    this.list()
  }
}
</script>

<style scoped>

</style>
